<template>
    <div>
      
          <!-- 头部导航 -->
        <div class="navbar">
            <img class="tb" src="/img/fh.png" alt="" @click="onClick">
            <span>宠物档案</span>
        </div>
        <!-- 头像上传 -->
       <el-upload
            class="avatar-uploader"
            action="/admin/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <img v-else src="/img/cat.png" class="cat" alt="">
            <!-- <i  class="el-icon-plus avatar-uploader-icon"></i> -->
        </el-upload>
        <img class="aaa" src="/img/pic.png" alt="">
        <!--  -->
        <div class="type-cardog">
            <span class="span">类型</span>
            <span :class="CatADogCur == CatADog[0].index ? 'span-cur':'span-two'" @click="getCur(CatADog[0].index)">{{CatADog[0].cat}}</span>
            <span :class="CatADogCur == CatADog[1].index ? 'span-cur':'span-two'" @click="getCur(CatADog[1].index)">{{CatADog[1].dog}}</span>
            <span class="span1">名字</span>
            <input type="text" class="inp">
             <span class="span3">岁数</span>
            <input type="text" class="inp2" placeholder="填写宠物岁数">
             <span class="span4">性别</span>
            <span :class="CatADogSexCur == CatADogSex[0].index ? 'span-cur1':'span-one'" @click="getSexCur(CatADogSex[0].index)">{{CatADogSex[0].woman}}</span>
            <span :class="CatADogSexCur == CatADogSex[1].index ? 'span-cur1':'span-one'" @click="getSexCur(CatADogSex[1].index)">{{CatADogSex[1].man}}</span>
            <!-- 如果是选中是猫咪 -->
            <div class="curCat">
                <span class="span5">品种</span>
                <input type="text" class="inp3" placeholder="非必填">
                <span class="span6">宠物介绍</span>
                <!-- <input type="text" class="inp1" placeholder="描述一下吧"> -->
                <textarea class="inp1" placeholder="描述一下吧" name="" id="" cols="30" rows="10"></textarea>
            </div>
        </div>
         <van-goods-action>
            <van-goods-action-button @click="onClickLeft" color="#f8e176" type="warning" text="添加" />
        </van-goods-action>
  
    </div>
</template>

<script>
    export default {
    data() {
      return {
        imageUrl: '',
        CatADog:[{index:0,cat:"猫咪"},{index:1,dog:"狗狗"}],
        CatADogCur: 0,  //当前选中项
        CatADogSex:[{index:0,woman:"女生"},{index:1,man:"男生"}],
        CatADogSexCur: 0,  //当前选中项
      };
    },
    methods: {
       onClick(){
            this.$router.go(-1)
       },
          //返回
        onClickLeft() {
                this.$router.push('/catshopping')
            },
        getSexCur(index){
            this.CatADogSexCur=index
            },
        getCur(index){
          this.CatADogCur=index
        },
        //文件上传成功
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

<style lang="scss">
.aaa{
  width: 25px;
  height: 25px;
  position: relative;
  top: -7vw; left: 57vw;
  opacity: 0.9;
}
.type-cardog{
    width: 100%; height: 100vw;
    // background-color: aqua;
    padding: 13px;
    .curCat{
        width: 100%; height: 60vw;
        // background-color: antiquewhite;
        margin-top: -18px;
    }
    .span{
        font-size: 14px;
    }
    .span1{
        display: block;
        font-size: 14px;
        margin-top: 20px;
        position: relative;
        top: 3vw;
    }
    .span2{
         display: block;
        font-size: 14px;
        margin-top: 20px;
        position: relative;
        top: -3vw;
    }
     .span3{
         display: block;
        font-size: 14px;
        margin-top: 20px;
        position: relative;
        top: 0vw;
    }
    .span4{
         display: block;
        font-size: 14px;
        margin-top: 20px;
        position: relative;
        top: -7vw;
    }
     .span5{
         display: block;
        font-size: 14px;
        margin-top: 20px;
        position: relative;
        top: -4vw;
    }
    .span6{
        display: block;
        font-size: 14px;
        margin-top: 20px;
        position: relative;
        top: -13vw;
    }
    .inp{
        background-color: #f8f8f8;
        width: 83vw; height: 12vw;
        border: 0; border-radius: 15px;
        display: inline-block;
        position: relative;
        bottom: 5vw; left: 10vw;
        padding: 10px;
    }
     .inp2{
        background-color: #f8f8f8;
        width: 83vw; height: 12vw;
        border: 0; border-radius: 15px;
        display: inline-block;
        position: relative;
        bottom: 8vw; left: 10vw;
        padding: 10px;
    }
    .inp3{
        background-color: #f8f8f8;
        width: 83vw; height: 12vw;
        border: 0; border-radius: 15px;
        display: inline-block;
        position: relative;
        bottom: 12vw; left: 10vw;
        padding: 10px;
    }
    .inp1{
        background-color: #f8f8f8;
        width: 93vw; height: 30vw;
        border: 0; border-radius: 15px;
        display: inline-block;
        position: relative;
        bottom: 10vw; 
        padding-left: 15px; padding-top: 10px;
    }
    .span-cur{
        display: inline-block;
        width: 60px; height: 30px;
        font-size: 12px; line-height: 30px; text-align: center;
        background-color: #fff7f7;
        color: #e25a64; 
        border: 1px solid #e25a64;
        border-radius: 15px;
        margin: 0 5px 0 18px;
    }
    .span-two{
        display: inline-block;
        width: 60px; height: 30px;
        font-size: 12px; line-height: 30px; text-align: center;
        border-radius: 15px;
        margin: 0 5px 0 18px;
        background-color: #ffffff;
        color: #999; 
        border: 1px solid #999;
    }
     .span-cur1{
         position: relative;
        top: -13vw; left: 7vw;
        display: inline-block;
        width: 60px; height: 30px;
        font-size: 12px; line-height: 26px; text-align: center;
        background-color: #fff7f7;
        color: #e25a64; 
        border: 1px solid #e25a64;
        border-radius: 15px;
        margin: 0 5px 0 18px;
    }
    .span-one{
        position: relative;
        top: -13vw; left: 7vw;
        display: inline-block;
        width: 60px; height: 30px;
        font-size: 12px; line-height: 26px; text-align: center;
        border-radius: 15px;
        margin: 0 5px 0 18px;
        background-color: #ffffff;
        color: #999; 
        border: 1px solid #999;
    }
}
.navbar{
   width: 100%;
   height: 13vw;
   background-color: white;
   text-align: center;
   line-height: 13vw;
   // background-color: aqua;
   img{  
       position: relative;
       top: 0vw; left: -35vw;
       width: 25px;
       height: 25px;
       display: inline-block;
   }
}
  .avatar-uploader .el-upload {
    border: 2px solid orange;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    left: 40vw;
    overflow: hidden;
    width: 25vw; height: 25vw;
    background-color: rgb(245, 245, 245);
  }
  .avatar-uploader .el-upload:hover {
    border-color: orange;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .cat{
      width: 60px; height: 60px;
      display: block; margin: auto; 
      margin-top: 15px;
  }
</style>